<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端路由实现的原理是什么</title>
</head>
<body>
  <script>
    /**
     * 
     * 要实现前端路由，需要解决两个核心问题：
     * 1.如何改变 URL 却不引起页面刷新？
     * 2.如何检测 URL 变化了？
     * 下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。
     * 
     * hash 实现
     * 
     * 1.hash 是 URL 中 hash ( #) 及后面的那部分，
     * 常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新
     * 
     * 2.通过 hashchange 事件监听 URL 的变化，
     * 改变 URL 的方式只有这几种：
     * 通过浏览器前进后退改变 URL、
     * 通过 标签改变 URL、通过 window.location改变URL，
     * 这几种情况改变 URL 都会触发 hashchange 事件
     * 
     * 
     * history 实现
     * 
     * 1.history 提供了 pushState 和 replaceState 两个方法，
     * 这两个方法改变 URL 的 path 部分不会引起页面刷新
     * 
     * 2.history 提供类似 hashchange 事件的 popstate 事件，
     * 但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，
     * 通过 pushState/replaceState或 标签改变 URL 不会触发 popstate 事件。
     * 好在我们可以拦截 pushState/replaceState的调用和 标签的点击事件来检测 URL 变化，
     * 所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。
     * 
     * 
     * vue history需后端配置的方法和原理
     * 文献：https://blog.csdn.net/weixin_33913332/article/details/91395448
     * 
     * vue history需后端配置的原理
     * 当我们去掉#号直接访问路由时，
     * 如果我们默认访问 www.xxx.com
     * 服务器会默认寻找 www.xxx.com/index.html,然后将资源返回给路由器
     * 但是当我们访问 www.xxx.com/home 时服务器会去找 home文件，
     * 这时服务端肯定是没有的
     * 所以，后端需要配置访问 www.xxx.com时无论后面的路由是什么统统返回 index.html
     * 然后，vue的router会截取www.xxx.com 后面的部分，然后做出处理跳转对应的ui
     * 
     * 
    */
  </script>
</body>
</html>